<template>
  <div class="login-container">
    <div class="log-box">
      <div class="log-title">
        <h1>欢迎登录数据可视化平台</h1>
      </div>
      <div class="form-data">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="ruleForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-radio v-model="ruleForm.role" label="0">管理员</el-radio>
            <el-radio v-model="ruleForm.role" label="1">患者</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                style="width: 100%"
                @click="submitForm('ruleForm')"
            >立即登录
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="log-bottom">
        <el-link type="primary" @click="addUser">没有账号？创建账号</el-link>
      </div>
    </div>
  </div>
</template>
<script>
import {doLogin} from "@/api/login.js";
import {patientLogin} from "@/api/patient";

export default {
  data() {
    return {
      ruleForm: {
        account: "admin",
        password: "admin",
        role: '0'
      },
      rules: {
        account: [{required: true, message: "请输入账号", trigger: "change"}],
        password: [
          {required: true, message: "请输入密码", trigger: "change"},
        ],
        role: [
          {required: true, message: "请选择角色", trigger: "change"},
        ],
      },
    };
  },
  methods: {
    addUser() {
      this.$router.push("/Apply");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.role == "0") {
            // 管理员登录
            doLogin(this.ruleForm.account, this.ruleForm.password).then((val) => {
              if (val.code == 200) {
                sessionStorage.setItem("userInfo", JSON.stringify(val.data));
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                sessionStorage.setItem("role", 'admin')
                this.$router.push("/home");
              } else {
                this.$message.error(val.data);
              }
            });
          } else if (this.ruleForm.role == "1") {
            // 患者登录
            patientLogin(this.ruleForm.account, this.ruleForm.password).then((val) => {
              if (val.code == 200) {
                sessionStorage.setItem("userInfo", JSON.stringify(val.data));
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                sessionStorage.setItem("role", 'patient')
                this.$router.push("/home");
              } else {
                this.$message.error(val.data);
              }
            });
          }

        } else {
          return false;
        }
      });
    },
  },
  components: {},
};
</script>
<style lang="less">
.login-container {
  background: #071332;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;

  .log-box {
    user-select: none;
    color: rgb(241, 237, 237);

    width: 600px;
    height: 350px;
    border-radius: 25px;
    background: #263f7e;

    .log-title {
      text-align: center;
      font-size: 25px;
    }

    .form-data {
      margin-top: 15px;
      width: 80%;

      .demo-ruleForm {
        color: rgb(241, 237, 237);
      }
    }

    .log-bottom {
      float: right;
      padding: 5px;
    }
  }
}
</style>
